---
name: useScroll
route: /useScroll
menu: 'Other'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo1';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

# useScroll

获取元素的滚动状态。


## 代码演示

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='基本用法' description='尝试滚动一下文字内容'>
  <Demo1 />
</JackBox>

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='监测整页的滚动' description='尝试滚动一下页面'>
  <Demo2 />
</JackBox>

## API
```
interface Position {
  left: number;
  top: number;
}

type Target = HTMLElement | Document;

function useScroll<T extends Target>(): [Position, MutableRefObject<T>]
function useScroll<T extends Target>(arg: Target | (() => Target)): [Position]
```

### Result

| 参数 | 说明     | 类型 |
|------|----------|------|
| position | 滚动容器当前的滚动位置 | `{x: number, y: number}`  |
| ref | 当未传入任何参数时，将 ref 绑定给需监听的节点 | `RefObject<HTMLElement>` |

### Params

| 参数    | 说明                                         | 类型                   | 默认值 |
|---------|----------------------------------------------|------------------------|--------|
| dom? | 可选项，如果未传入则会监听返回结果中的 ref，否则会监听传入的节点  | HTMLElement \| Document \| (() => HTMLElement) \| (() => Document) \| undefined | -      |
